<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no"
    />
    <title>Document</title>

    <style>
      html,
      body {
        margin: 0;
      }
      body {
        background-image: url("imgs/bg.jpg");
        background-size: cover;
        text-align: center;
      }
      h1 {
        font-size: 72px;
        color: #0096dc;
        margin-bottom: 0;
      }
      img {
        width: 100px;
      }
      h2 {
        font-size: 32px;
        color: #0096dc;
        margin-top: 0;
      }
    </style>

    <!-- import CSS -->
    <link
      rel="stylesheet"
      href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css"
    />
  </head>
  <body>
    <div id="app">
      <h1>欢迎来到酷鲨商城</h1>
      <img src="imgs/shark.png" alt="" />
      <h2>CoolSharkMall</h2>
      <el-card
        style="
          width: 600px;
          height: 300px;
          margin: 0 auto;
          background-color: rgba(255, 255, 255, 0.3);
        "
      >
        <el-form label-width="55px" style="width: 400px; margin: 50px auto">
          <el-form-item label="用户名">
            <el-input type="text" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input type="password" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="position: relative; right: 23px"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </body>
  <!-- import Vue before Element -->
  <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
  <!-- import JavaScript -->
  <script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
  <script>
    let v = new Vue({
      el: "#app",
      data: function () {
        return {};
      },
      methods: {},
    });
  </script>
</html>
